<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

    <link href="./css/bootstrap.min.css" rel="stylesheet">
    <script type='text/javascript' src="./js/vendor/jquery-2.1.1.min.js"></script>
    <script type='text/javascript' src="./js/vendor/bootstrap.min.js"></script>

    <style type="text/css">
        body{margin-top:50px;}
        .glyphicon { margin-right:10px; }
        .panel-body { padding:0px; }
        .panel-body table tr td { padding-left: 15px }
        .panel-body .table {margin-bottom: 0px; }
    </style>

    <script type="text/javascript">
        function openPage(url) {
            window.open(url);
        }
    </script>
</head>

<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">幼儿教育</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">

                <li><a href="#kuai2">帮助</a></li>
            </ul>
        </div>
    </div>
</nav>

<div class="container" style="padding-top: 20px">
    <div class="row">
        <div class="col-sm-3 col-md-3">
            <div class="panel-group" id="accordion">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><span class="glyphicon glyphicon-folder-close">
                            </span>第一幼教中心</a>
                        </h4>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse in">
                        <div class="panel-body">
                            <table class="table">
                                <tr>
                                    <td>
                                        <span class="glyphicon glyphicon-pencil text-primary"></span><a href="#">一班</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <span class="glyphicon glyphicon-flash text-success"></span><a href="#">二班</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <span class="glyphicon glyphicon-file text-info"></span><a href="#">三班</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <span class="glyphicon glyphicon-comment text-success"></span><a href="#">四班</a>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"><span class="glyphicon glyphicon-th">
                            </span>第二幼</a>
                        </h4>
                    </div>
                    <div id="collapseTwo" class="panel-collapse collapse">
                        <div class="panel-body">
                            <table class="table">
                                <tr>
                                    <td>
                                        <a href="#">一班</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <a href="#">实验班</a>
                                    </td>
                                </tr>

                            </table>
                        </div>
                    </div>
                </div>

            </div>
        </div>

        <div class="col-sm-9 col-md-9">
            <ul id="myTab" class="nav nav-tabs">
                <li class="active">
                    <a href="#shige" data-toggle="tab">
                        诗歌
                    </a>
                </li>
                <li><a href="#tianzi" data-toggle="tab">田字格</a></li>
            </ul>
            <div id="myTabContent" class="tab-content">
                <div class="tab-pane fade in active" id="shige">
                    <p></p>
                    <button type="button" class="btn btn-primary" onclick="openPage('./index.html')">运行</button>
                    <p></p>
                    <img src="./img/bg.png" width="700"></img>
                </div>
                <div class="tab-pane fade" id="tianzi">
                    <p></p>
                    <button type="button" class="btn btn-primary" onclick="openPage('./tianzi.html')">运行</button>
                    <p></p>
                    <img src="./img/bg.png" width="700"></img>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>
